<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
        <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        
        <!-- Title -->
        <title>Home</title>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="/My97DatePicker/WdatePicker.js"></script>

        <!-- Styles -->
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
        <link href="/houtai/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="/houtai/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="/houtai/plugins/icomoon/style.css" rel="stylesheet">
        <link href="/houtai/plugins/uniform/css/default.css" rel="stylesheet"/>
        <link href="/houtai/plugins/switchery/switchery.min.css" rel="stylesheet"/>
        <link href="/houtai/plugins/nvd3/nv.d3.min.css" rel="stylesheet">
      
        <!-- Theme Styles -->
        <link href="/houtai/css/ecaps.min.css" rel="stylesheet">
        <link href="/houtai/css/custom.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>



        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

        <![endif]-->
        <style>
            th{
                font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
                font-weight: bold;
                text-align: center;
            }
            td{
                text-align: center;
            }
            .pager-header{

            }

            .pager-header .header-info{
                float:left;
            }

            .pager-header .header-info .info-number{
                font-weight:bold;
            }

            .pager-header .header-nav{
                float:right;
            }

            .pager-header .header-nav .nav-number{
                width:30px;
                margin:0 5px;
            }


        </style>

        <style type="text/css">
            #divfrom {
                float: left;
                width: 150px;
            }

            #divto {
                float: left;
                width: 150px;
            }

            #divoperator {
                float: left;
                width: 50px;
                padding: 60px 5px;
            }

            #divoperator input[type="button"] {
                margin: 10px 0;
            }

            #selDepartments {
                display: block;
                width: 100%;
            }

            #selEmployees {
                display: block;
                width: 100%;
                height: 200px;
            }

            #selSelectedEmployees {
                display: block;
                width: 100%;
                height: 225px;
            }
        </style>
        <script type="application/javascript">
            function employee(employeeid, employeename) {
                this.employeeid = employeeid;
                this.employeename = employeename;
            }

            function department(departmentid, departmentname, employees) {
                this.departmentid = departmentid;
                this.departmentname = departmentname;
                this.employees = employees;
            }

            var data = new Array(
                new department(1, "技术部", new Array(
                    new employee(1001, "a00"), new employee(1002, "a01"), new employee(1003, "a02"), new employee(1004, "a03"))),
                new department(2, "销售部", new Array(
                    new employee(2001, "b00"), new employee(2002, "b01"), new employee(2003, "b02"), new employee(2004, "b03"))),
                new department(3, "市场部", new Array(
                    new employee(3001, "c00"), new employee(3002, "c01"), new employee(3003, "c02"), new employee(3004, "c03"))),
                new department(4, "行政部", new Array(
                    new employee(4001, "d00"), new employee(4002, "d01"), new employee(4003, "d02"), new employee(4004, "d03"))));

            var selDepartments;
            var selEmployees;
            var selSelectedEmployees;

            function body_load() {
                selDepartments = document.getElementById("selDepartments");
                selEmployees = document.getElementById("selEmployees");
                selSelectedEmployees = document.getElementById("selSelectedEmployees");

                $.get("/alldeps", function (data) {
                    for (let i = 0; i < data.length; i++) {
                        var item = data[i];
                        var dep = document.createElement("option");
                        dep.value = item.departmentId;
                        dep.text = item.departmentName;
                        selDepartments.appendChild(dep);
                    }
                    fillEmployees();
                })
            }

            function fillEmployees() {
                clearList(selEmployees);
                var departmentid = selDepartments.options[selDepartments.selectedIndex].value;

                $.get("/getempbydepid?depId=" + departmentid, function (data) {
                    for (i = 0; i < data.length; i++) {
                        var emp = document.createElement("option");
                        emp.value = data[i].employeeId;
                        emp.text = data[i].employeeName;
                        selEmployees.appendChild(emp);
                    }
                })
            }

            function clearList(list) {
                while (list.childElementCount > 0) {
                    list.removeChild(list.lastChild);
                }
            }

            function selectEmployees() {
                for (var i = 0; i < selEmployees.options.length; i++) {
                    if (selEmployees.options[i].selected) {
                        addEmployee(selEmployees.options[i]);
                        selEmployees.options[i].selected = false;
                    }
                }
            }

            function deSelectEmployees() {
                var elementsToRemoved = new Array();
                var options = selSelectedEmployees.options;
                for (var i = 0; i < options.length; i++) {
                    if (options[i].selected) {
                        elementsToRemoved.push(options[i]);
                    }
                }
                for (i = 0; i < elementsToRemoved.length; i++) {
                    selSelectedEmployees.removeChild(elementsToRemoved[i]);
                }
            }

            function addEmployee(optEmployee) {
                var options = selSelectedEmployees.options;
                var i = 0;
                var insertIndex = -1;
                while (i < options.length) {
                    if (optEmployee.value == options[i].value) {
                        return;
                    } else if (optEmployee.value < options[i].value) {
                        insertIndex = i;
                        break;
                    }
                    i++;
                }
                var opt = document.createElement("option");
                opt.value = optEmployee.value;
                opt.text = optEmployee.text;
                opt.selected = true;

                if (insertIndex == -1) {
                    selSelectedEmployees.appendChild(opt);
                } else {
                    selSelectedEmployees.insertBefore(opt, options[insertIndex]);
                }
            }
        </script>
    </head>
    <body onload="body_load()">
        
        <!-- Page Container -->
        <div class="page-container">

            <!-- /Page Sidebar -->
            <#include 'page-sidebar.ftl'>
            <!-- Page Content -->


            <div class="page-content">

                <!-- Page Header -->
                <#include 'page-header.ftl'>
                <!-- /Page Header -->
                <!-- Page Inner -->
                <div class="page-inner">
                    <div class="page-title">
                        <h3 class="breadcrumb-header">预定会议</h3>
                    </div>
                    <div id="main-wrapper" >
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-white" style="height: 900px">
                                    <div class="panel-heading clearfix">
                                        <h4 class="panel-title">会议室信息</h4>
                                    </div>
                                    <form action="/doAddMeeting" method="post" style="height: 900px">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">会议名称:</label>
                                            <input name="meetingname" class="form-control" type="text" id="meetingname" maxlength="20"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">预计参加人数:</label>
                                            <input name="numberofparticipants" class="form-control" type="text" id="numofattendents"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">预计开始时间:</label>
                                            <input type="text" class="Wdate" id="starttime" name="starttime"
                                                   onclick="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">预计结束时间:</label>
                                            <input type="text" class="Wdate" id="endtime" name="endtime"
                                                   onclick="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})">
                                        </div>

                                        <div class="form-group">
                                            <label for="exampleInputEmail1">会议室名称:  </label><br>
                                            <select name="roomid">
                                                <#list mrs as mr>
                                                    <option value="${mr.roomid}">${mr.roomname}</option>
                                                </#list>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="exampleInputEmail1">会议说明:  </label><br>
                                            <textarea name="description" id="description" rows="5"></textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="exampleInputEmail1">选择参会人员:  </label><br>
                                            <div id="divfrom">
                                                <select id="selDepartments" onchange="fillEmployees()">
                                                </select>
                                                <select id="selEmployees" multiple="true">
                                                </select>
                                            </div>
                                            <div id="divoperator">
                                                <input type="button" class="clickbutton" value="&gt;" onclick="selectEmployees()"/>
                                                <input type="button" class="clickbutton" value="&lt;" onclick="deSelectEmployees()"/>
                                            </div>
                                            <div id="divto">
                                                <select name="mps" id="selSelectedEmployees" multiple="true">
                                                </select>
                                            </div>
                                        </div>
                                        <div style="margin-top: 300px">
                                            <input type="submit" class="btn btn-primary" value="预定会议">
                                            <input type="reset" class="btn btn-success" value="重置">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div><!-- Row -->
                    </div><!-- Main Wrapper -->
                    <div class="page-footer">
                        <p>Copyright &copy; 2021.Writer name JQueryZK.</p>
                    </div>


            </div><!-- /Page Content -->
        </div><!-- /Page Container -->
        
        
        <!-- Javascripts -->
        <script src="/houtai/plugins/jquery/jquery-3.1.0.min.js"></script>
        <script src="/houtai/plugins/bootstrap/js/bootstrap.min.js"></script>
        <script src="/houtai/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
        <script src="/houtai/plugins/uniform/js/jquery.uniform.standalone.js"></script>
        <script src="/houtai/plugins/switchery/switchery.min.js"></script>
        <script src="/houtai/plugins/d3/d3.min.js"></script>
        <script src="/houtai/plugins/nvd3/nv.d3.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.time.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.symbol.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.resize.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.tooltip.min.js"></script>
        <script src="/houtai/plugins/flot/jquery.flot.pie.min.js"></script>
        <script src="/houtai/plugins/chartjs/chart.min.js"></script>
        <script src="/houtai/js/ecaps.min.js"></script>
        <script src="/houtai/js/pages/dashboard.js"></script>

        </div>

</body>
</html>